// 销售趋势 - 折线图
function setTrend() {

    // 功能 - 处理数据并渲染图表
    async function render() {

        // 导入原始数据
        let data = (await getData())[0]
        if (data) { } else return

        // 处理得到各项数据
        let title = data.title // 标题
        let month = data.xAxis // 月份
        let line = data.series.map(item => item.data) // 折线
        let city = data.series.map(item => item.name) //  城市

        // 构建图表导入数据
        const myChart = echarts.init(document.getElementById('main1'));
        const option = {
            backgroundColor: '#293441',
            title: {
                textStyle: { color: '#fefefe', fontSize: 12 },
                text: title
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985',
                    },
                }
            },
            legend: {
                textStyle: { color: '#949595' }, // 设置示例的文字颜色
                data: city,
                right: 0,
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    axisLabel: {
                        color: '#a4a5a5' // 设置 x 轴文字颜色
                    },
                    axisTick: {
                        show: false // 不显示 x 轴刻度
                    },
                    boundaryGap: false,
                    data: month,
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '单位：万',
                    max: 1400,
                    interval: 200,
                    axisLabel: {
                        color: '#a4a5a5' // 设置 y 轴文字颜色
                    },
                    axisLine: {
                        show: true, // 显示 y 轴轴线
                    },
                    splitLine: {
                        show: false // 不显示 y 轴的网格线
                    },
                }
            ],
            series: [
                {
                    name: city[0],
                    type: 'line',
                    stack: 'Total',
                    itemStyle: { color: '#759aa0' },
                    lineStyle: { color: '#759aa0' },
                    areaStyle: { color: '#759aa0' },
                    symbol: 'none',
                    data: line[0]
                },
                {
                    name: city[1],
                    type: 'line',
                    stack: 'Total',
                    itemStyle: { color: '#dd6b66' },
                    lineStyle: { color: '#dd6b66' },
                    areaStyle: { color: '#dd6b66' },
                    symbol: 'none',
                    data: line[1]
                },
                {
                    name: city[2],
                    type: 'line',
                    stack: 'Total',
                    itemStyle: { color: '#e69d87' },
                    lineStyle: { color: '#e69d87' },
                    areaStyle: { color: '#e69d87' },
                    symbol: 'none',
                    data: line[2]
                },
                {
                    name: city[3],
                    type: 'line',
                    stack: 'Total',
                    itemStyle: { color: '#8dc1a9' },
                    lineStyle: { color: '#8dc1a9' },
                    areaStyle: { color: '#8dc1a9' },
                    symbol: 'none',
                    data: line[3]
                },
                {
                    name: city[4],
                    type: 'line',
                    stack: 'Total',
                    label: {
                        show: true,
                        position: 'top'
                    },
                    itemStyle: { color: '#ea7e53' },
                    lineStyle: { color: '#ea7e53' },
                    areaStyle: { color: '#ea7e53' },
                    symbol: 'none',
                    data: line[4]
                }
            ]
        };
        myChart.setOption(option);
    }

    render()
    setInterval(render, 5000);
}

setTrend()